<ng-container
  *ngIf="pkg | toHealthChecks | async | keyvalue: asIsOrder as checks"
>
  <ng-container *ngIf="checks.length">
    <ion-item-divider>Health Checks</ion-item-divider>
    <!-- connected -->
    <ng-container *ngIf="connected$ | async; else disconnected">
      <ion-item *ngFor="let health of checks">
        <!-- result -->
        <ng-container *ngIf="health.value?.result as result; else noResult">
          <ion-spinner
            *ngIf="isLoading(result)"
            class="icon-spinner"
            color="primary"
            slot="start"
          ></ion-spinner>
          <ion-icon
            *ngIf="result === HealthResult.Success"
            slot="start"
            name="checkmark"
            color="success"
          ></ion-icon>
          <ion-icon
            *ngIf="result === HealthResult.Failure"
            slot="start"
            name="warning-outline"
            color="warning"
          ></ion-icon>
          <ion-icon
            *ngIf="result === HealthResult.Disabled"
            slot="start"
            name="remove"
            color="dark"
          ></ion-icon>
          <ion-label>
            <h2 class="bold">
              {{ pkg.manifest['health-checks'][health.key].name }}
            </h2>
            <ion-text [color]="result | healthColor">
              <p>
                <span *ngIf="isReady(result)">{{ result | titlecase }}</span>
                <span *ngIf="result === HealthResult.Starting">...</span>
                <span *ngIf="result === HealthResult.Failure">
                  {{ $any(health.value).error }}
                </span>
                <span *ngIf="result === HealthResult.Loading">
                  {{ $any(health.value).message }}
                </span>
                <span
                  *ngIf="
                    result === HealthResult.Success &&
                    pkg.manifest['health-checks'][health.key]['success-message']
                  "
                >
                  :
                  {{
                    pkg.manifest['health-checks'][health.key]['success-message']
                  }}
                </span>
              </p>
            </ion-text>
          </ion-label>
        </ng-container>
        <!-- no result -->
        <ng-template #noResult>
          <ion-spinner
            class="icon-spinner"
            color="dark"
            slot="start"
          ></ion-spinner>
          <ion-label>
            <h2 class="bold">
              {{ pkg.manifest['health-checks'][health.key].name }}
            </h2>
            <p class="primary">Awaiting result...</p>
          </ion-label>
        </ng-template>
      </ion-item>
    </ng-container>
    <!-- disconnected -->
    <ng-template #disconnected>
      <ion-item *ngFor="let health of checks">
        <ion-avatar slot="start">
          <ion-skeleton-text class="avatar"></ion-skeleton-text>
        </ion-avatar>
        <ion-label>
          <ion-skeleton-text class="label"></ion-skeleton-text>
          <ion-skeleton-text class="description"></ion-skeleton-text>
        </ion-label>
      </ion-item>
    </ng-template>
  </ng-container>
</ng-container>
